<template>
  <img
    alt="Vue logo"
    src="../assets/logo.png"
  />
  <h1>{{ msg }}</h1>
  <button @click="inCrement"> count is: </button>
  <p>{{ count }}</p>
  <el-button type="primary" @click="inCrement">Primary</el-button>
</template>
 
<script>
  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex'
  import { key } from '../store'
 
  export default defineComponent({
    name: 'HelloWorld',
    // props: {
    //   msg: {
    //     type: String,
    //     default: ''
    //   }
    // },
    data() {
      return {
        msg: 'this is HelloWorld'
      }
    },
    setup() {
      const store = useStore(key)
 
      const count = computed(() => store.state.count)
 
      return {
        count,
        inCrement: () => store.commit('increment')
      }
    }
  })
</script>